<template>
	<view>
		<view v-if="params.teamId && params.teamId != '-1'" class="">
			<view class='fixed-box'>
				<cu-custom>
					<view slot="content">客户</view>
				</cu-custom>

				<view class='tabs1'>
					<view class='tab-item' :class='{active: params.type == item.value}' v-for='item in tabs1'
						:key='item.value' @click='handleChangeTab1(item)'>{{item.name}}</view>
				</view>

				<view style='position: relative;margin-top: 22rpx;'>
					<tagAll ref='tagAll' v-model='params.label' :tags='tabs2' @action='handleTagAction'></tagAll>
				</view>
				<view class='tabs2'>
					<view class='tab-content'>
						<scroll-view class="tab-box" scroll-x scroll-with-animation="true" id="scroll-view"
							:scroll-left="scrollLeft">
							<view class="tab-item-sty">
								<view :id="'item-' + item.id" class='tab-item'
									:class='{active: params.label == item.id}' v-for='item in tabs2' :key='item.id'
									@click="handleChagneTabs2(item)">
									{{item.title}}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class='menu-content' @click='handleTagAll'>
						<image class='icon' mode='widthFix' src='/static/community/menu.png'></image>
					</view>

				</view>
			</view>

			<view class='list'>
				<view class='list-item' v-for='(item,index) in list' :key="index">
					<view class='title text-cut'>{{item.name}}</view>
					<view class='form'>
						<view class='form-item'>
							<view class='label'>手机号:</view>
							<view class='value'>{{item.telphone}}</view>
						</view>
						<view class='form-item'>
							<view class='label'>绑定时间:</view>
							<view class='value'>{{item.bindTime}}</view>
						</view>
						<view class='form-item' v-if='params.type == "CARGO"'>
							<view class='label'>宠物数量:</view>
							<view class='value'>{{item.num}}</view>
						</view>
						<view class='form-item' v-if='params.type == "SERVICE"'>
							<view class='label'>服务数量:</view>
							<view class='value'>{{item.num}}</view>
						</view>
					</view>
					<view class='actions'>
						<view class='action' @click="handleTagSet(item)">设置标签</view>
					</view>
				</view>
			</view>
			<data-null v-if="!list.length" :top="250"></data-null>
			<view class='submit' @click='handleAdd'>
				<image class='icon' src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181419447233.png"
					mode="">
				</image>
				<text>添加客户</text>
			</view>
		</view>
		<view v-else>
			<cu-custom :bgColor="'var(--primaryBg)'">
				<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
					客户
				</view>
			</cu-custom>
			<noMerchant ref="noMerchant" :petTeam="pet_team"></noMerchant>
		</view>
		<clientAdd ref='clientAdd'></clientAdd>
		<tagAdd ref='tagAdd'></tagAdd>
		<tagMang ref='tagMang'></tagMang>
		<tagSet ref='tagSet'></tagSet>
		<showModal1 ref="showModal1"></showModal1>
		<tabBar ref="tabBar" path="/pages/pet/client/index"></tabBar>
	</view>
</template>

<script>
	import {
		listClientLabel,
		addClientLabel,
		delClientLabel
	} from "@/api/pet/client/label.js"
	import {
		pageClient,
		addClient,
		editClient
	} from "@/api/pet/client/index.js"
	import {
		listTeamrole,
	} from '@/api/team/index'
	import noMerchant from "@/components/noMerchant"
	import tabBar from "@/components/tabBar/index"
	import clientAdd from './clientAdd.vue';
	import tagAll from './tagAll.vue';
	import tagAdd from './tagAdd.vue';
	import tagMang from './tagMang.vue';
	import tagSet from './tagSet.vue';
	import showModal1 from '@/components/show-modal1.vue';
	import util from '@/common/util'
	export default {
		components: {
			clientAdd,
			tagAll,
			tagAdd,
			tagMang,
			tagSet,
			showModal1,
			noMerchant,
			tabBar
		},
		data() {
			return {
				tabs1: [{
					name: '宠物客户',
					value: 'CARGO'
				}, {
					name: '服务客户',
					value: 'SERVICE'
				}],
				scrollLeft: 0,
				tabs2: [],
				params: {
					page: 1,
					limit: 10,
					teamId: '',
					type: 'CARGO',
					label: '',
				},
				total: 0,
				list: [],
				pet_team: {},
			}
		},
		created() {

		},
		methods: {
			getPetTeam() {
				this.pet_team = uni.getStorageSync('pet_team')
				if (this.pet_team && this.pet_team.teamId != '-1') {
					this.params.teamId = this.pet_team.teamId
				}
				uni.stopPullDownRefresh()
			},
			regMerchant() {
				//if (!util.isLogin()) return;
				listTeamrole({
					svrType: 'CARGO',
					status: 'PASS'
				}).then(e => {
					let item = e?.find(item => item.teamType == 'E')
					if (item) {
						uni.setStorageSync('pet_team', {
							teamId: item.teamId,
							teamName: item.teamName,
							applyStatus: item.applyStatus
						})
					} else {
						let userItem = e[0]
						uni.setStorageSync('pet_team', {
							teamId: '-1',
							teamName: '个人',
							applyStatus: userItem.applyStatus, //是否有申请过服务商
							cargoTeamId: userItem.cargoTeamId, // 再次申请服务商要上传的id
							cargoTeamStatus: userItem.cargoTeamStatus, //后台审核状态
						})
					}
					this.init({type:this.params.type})
				})
			},
			init(e) {
				console.log(e)
				this.params.type = (e && e.type) || 'CARGO' 
				this.getPetTeam()
				this.params.page = 1
				this.list = []
				if (this.params.teamId) {
					this.getClientLabel()
					this.getList()
				}
			},
			getClientLabel() {
				this.tabs2 = []
				listClientLabel({
					type: this.params.type,
					teamId: this.params.teamId
				}).then(res => {
					this.tabs2 = [{
						id: '',
						title: '全部'
					}, ...res]
				})
			},
			reachBottom() {
				if (this.total > this.params.page * this.params.limit) {
					this.params.page++;
					this.getList()
				}
			},

			getList() {
				this.isNull = false;
				pageClient(this.params).then(res => {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					uni.hideLoading()
					uni.stopPullDownRefresh()
					if (!this.list.length) {
						this.isNull = true;
					}
				})
			},
			handleChangeTab1(item) {
				console.log(item)
				if (this.params.type == item.value) return;
				this.params.type = item.value;
				this.params.label = ''
				this.init({type:this.params.type})
			},
			handleChagneTabs2(item) {
				if (this.params.label == item.id) return;
				this.params.label = item.id;
				let that = this;
				var query = uni.createSelectorQuery().in(this); //创建节点查询器
				query.select('#item-' + item.id).boundingClientRect(); //选择id='#item-' + selectedId的节点，获取节点位置信息的查询请求
				query.select('#scroll-view').boundingClientRect(); //获取滑块的位置信息
				query.select('#scroll-view').scrollOffset(); //获取页面滑动位置的查询请求
				query.exec(function(res) {
					that.scrollLeft = res[2].scrollLeft + res[0].left + res[0].width / 2 - res[1].width / 2
				});
				this.init({type:this.params.type})
			},
			handleAdd() {
				this.$refs.clientAdd.handleOpen({
					tags: this.tabs2,
					success: (form) => {
						addClient({
							...form,
							teamId: this.params.teamId,
							type: this.params.type,
						}).then(res => {
							uni.showToast({
								title: '操作成功',
								icon: 'none',
							})
							this.init({type:this.params.type})
						})
					}
				})
			},
			handleTagAll() {
				this.$refs.tagAll.handleOpen()
			},
			handleTagAction(type) {
				let that = this;
				if (type == 'mang') {
					this.$refs.tagMang.handleOpen({
						tags: this.tabs2,
						success: (list) => {
							let opid = []
							this.$refs.showModal1.open({
								content: '确认修改？',
								success: () => {
									for (let i = 0; i < this.tabs2.length; i++) {
										if (this.tabs2[i].id) {
											let findItem = list.find(item => item.id == this.tabs2[
												i].id)
											if (findItem == undefined) {
												opid.push(this.tabs2[i].id)
											}
										}
									}
									if (opid.length) {
										delClientLabel({
											opid: opid.join(',')
										}).then(res => {
											uni.showToast({
												title: '操作成功',
												icon: 'none',
											})
											this.params.label = ''
											this.init({type:this.params.type})
										})
									}
								}
							})
							// if
							console.log('管理标签')
						}
					})
				} else {
					this.$refs.tagAdd.handleOpen({
						success: (e) => {
							//新增标签
							addClientLabel({
								title: e,
								type: this.params.type,
								teamId: this.params.teamId
							}).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'none',
								})
								this.init({type:this.params.type})
							})
						}
					})
				}
			},
			handleTagSet(item) {
				this.$refs.tagSet.handleOpen({
					tags: this.tabs2,
					item: item,
					success: (selects) => {
						editClient({
							id: item.id,
							teamId: item.teamId,
							name: item.name,
							telphone: item.telphone,
							type: item.type,
							labels: selects.length ? selects.join(',') : ''
						}).then(res => {
							uni.showToast({
								title: '操作成功',
								icon: 'none',
							})
							this.init({type:this.params.type})
						})
					}
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.fixed-box {
		background-color: var(--primaryBg);
		position: sticky;
		top: 0;
		z-index: 9;

		.tabs1 {
			display: flex;
			align-items: center;
			margin-top: 12rpx;

			.tab-item {
				flex: 1;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--h2Color);
				position: relative;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;

				&.active {
					font-weight: 600;
					color: var(--h1Color);

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 32rpx;
						height: 4rpx;
						background: var(--h1Color);
						border-radius: 3rpx;
					}
				}
			}
		}

		.tabs2 {
			width: 100%;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			padding-left: 24rpx;
			margin-top: 20rpx;
			position: relative;

			.tab-content {
				flex: 1;
				overflow: hidden;

				.tab-box {
					width: 100%;

					.tab-item-sty {
						display: flex;
						width: max-content;

						.tab-item {
							font-size: 26rpx;
							color: var(--h2Color);
							padding: 0 32rpx;
							height: 56rpx;
							margin-right: 16rpx;
							border-radius: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background: #F8F8F8;

							&.active {
								background: var(--primaryBg);
								color: #222;
							}
						}
					}
				}
			}

			.menu-content {
				width: 100rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.list {
		padding: 16rpx;

		.list-item {
			padding: 28rpx 24rpx;
			margin-bottom: 16rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: var(--h1Color);
			}

			.form {
				margin-top: 24rpx;

				.form-item {
					display: flex;
					line-height: 40rpx;
					font-size: 28rpx;
					color: var(--h2Color);
					margin-bottom: 12rpx;

					&:last-child {
						margin: 0;
					}

					.label {
						width: 152rpx;
					}

					.value {
						flex: 1;
					}
				}
			}

			.actions {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 16rpx;

				.action {
					height: 70rpx;
					background: #FAFAFA;
					border-radius: 12rpx;
					margin-left: 20rpx;
					padding: 0 32rpx;
					font-size: 26rpx;
					color: var(--h1Color);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.submit {
		position: fixed;
		bottom: 160rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 202rpx;
		height: 80rpx;
		background: var(--primaryGradBg);
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 40rpx;
		border: 4rpx solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 28rpx;
		color: var(--btnColor);
		line-height: 1;

		.icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}
	}
</style>